<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: #666;
      }
      div::before{
          content: '我是小可爱 br  ';
      }
      /* 由于本身标签选择器的权重是1，伪元素的也是1，所以div::after的权重是2 */
      div::after {
        /* 伪元素是行内元素，需要转化为块级才能设置宽高 */
        display: block;
        content: '';
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <!-- 伪元素用两个冒号表示，属于行内元素
   语法如下，必须包含content:''属性
    element::before
    element::after
      例如 div::befor表示在div容器里面的前面创建一个伪元素  
-->
    <div>小爸爸</div>
  </body>
</html>
